<template>
  <view class="weekly-report">
    <u-navbar safeAreaInsetTop bgColor="transparent">
      <view class="u-nav-slot" slot="left">
        <u-icon name="arrow-left" color="#fff" @click="goBack"></u-icon>
        <view class="date-display" @click="show = true">
          <view class="date-display-box">
            {{ year }}年第{{ week }}周
            <u-icon name="arrow-down" color="#fff"></u-icon>
          </view>
        </view>
      </view>
    </u-navbar>
    <image class="bg" :src="reportBg" />
    <view class="weekly-report-title">舒城县景区运营周报</view>
    <view class="date-label">{{ jyDetailObj.date }}</view>

    <view class="common-box">
      <view class="common-title">
        <div class="left-line"></div>
        <div class="title-label">经营篇</div>
        <div class="right-line"></div>
      </view>

      <view class="home-stastic-bbox">
        <view class="home-stastic-box">
          <view class="stastic-item noAfter">
            <view>
              <image :src="icon1" />
              总营业额
            </view>
            <view class="big"
              ><view class="num">{{ numWan(jyDetailObj.totalPrice) || 0 }}</view
              >&nbsp;&nbsp;万元</view
            >
            <view class="circle-rate-box">
              环比
              <view
                class="rate-num"
                :style="{ color: getColor(jyDetailObj.totalQoq) }"
                >{{ jyDetailObj.totalQoq || 0 }}%</view
              >
              <image :src="getImg(jyDetailObj.totalQoq)" />
            </view>
          </view>
          <view class="stastic-item">
            <view>
              <image :src="icon1" />
              总营收
            </view>
            <view class="big"
              ><view class="num">{{ numWan(jyDetailObj.orderPrice) || 0 }}</view
              >&nbsp;&nbsp;万元</view
            >
            <view class="circle-rate-box">
              环比
              <view
                class="rate-num"
                :style="{ color: getColor(jyDetailObj.orderQoq) }"
                >{{ jyDetailObj.orderQoq || 0 }}%</view
              >
              <image :src="getImg(jyDetailObj.orderQoq)" />
            </view>
          </view>
        </view>
        <view class="divide-line"></view>
        <view class="home-stastic-box">
          <view class="stastic-item">
            <view>
              <image :src="icon1" />
              游览
            </view>
            <view
              ><view class="num">{{
                numWan(jyDetailObj.youwanPrice) || 0
              }}</view
              >&nbsp;&nbsp;万元</view
            >
          </view>
          <view class="stastic-item">
            <view>
              <image :src="icon2" />
              餐饮
            </view>
            <view
              ><view class="num">{{
                numWan(jyDetailObj.canyinPrice) || 0
              }}</view
              >&nbsp;&nbsp;万元</view
            >
          </view>
          <view class="stastic-item">
            <view>
              <image :src="icon3" />
              住宿
            </view>
            <view
              ><view class="num">{{ numWan(jyDetailObj.zhusuPrice) || 0 }}</view
              >&nbsp;&nbsp;万元</view
            >
          </view>
          <view class="stastic-item">
            <view>
              <image :src="icon4" />
              其他
            </view>
            <view
              ><view class="num">{{ numWan(jyDetailObj.qitaPrice) || 0 }}</view
              >&nbsp;&nbsp;万元</view
            >
          </view>
        </view>
      </view>

      <view class="common-chart-box">
        <view class="common-sec-title">人流量与营业额对比图</view>
        <view class="chart-title">
          <view class="chart-dw">单位：人次</view>
          <view class="chart-line-legend-box">
            <view class="line-item">
              <view style="background: #3287ff"></view>
              人流量
            </view>
            <view class="line-item">
              <view style="background: #05c46d"></view>
              营业额
            </view>
          </view>
          <view class="chart-dw">单位：元</view>
          <!-- <view class="chart-dw">单位：万元</view> -->
        </view>
        <qiun-data-charts
          type="line"
          :opts="lineOpt"
          :chartData="oneLineData"
        />
        <view class="home-center-box" style="margin-top: 48rpx">
          <view class="stastic-item">
            <view>总人流量</view>
            <view style="color: #3287ff"
              ><view class="num">{{ jyEchartNum.peopleCount || 0 }}</view
              >&nbsp;&nbsp;人次</view
            >
          </view>
          <view class="stastic-item">
            <view>总营业额</view>
            <view style="color: #05c46d"
              ><view class="num">{{ numWan(jyDetailObj.totalPrice) || 0 }}</view
              >&nbsp;&nbsp;万元</view
            >
          </view>
        </view>
      </view>

      <view class="view-top-box">
        <view class="common-sec-title">景区营业额TOP5</view>
        <view
          class="view-rank"
          v-for="(item, index) in viewList"
          :key="index"
          :style="{ color: item.color, background: item.bg }"
        >
          <view class="view-rank-title">
            {{ item.name }}
            <view class="right-tag"
              >日均营业额：{{ numberChangeString(item.dayTurn) }}元</view
            >
          </view>
          <view class="view-rank-subtitle">
            景区内商铺有<view class="num">{{ item.num }}</view
            >家
          </view>
          <view class="view-rank-subtitle">
            平均营业额<view class="num">{{ item.equaTurn }}</view
            >元，景区排名
            <view class="num">第{{ index + 1 }}</view>
          </view>
        </view>
      </view>

      <view class="view-top-box">
        <view class="common-sec-title">经营业态分析</view>
        <view class="analysis-list">
          <view class="analysis-item analysis-title">
            <view class="analysis-cell1">业态类型</view>
            <view class="analysis-cell2">店铺数量</view>
            <view class="analysis-cell3">交易金额</view>
            <view class="analysis-cell4">金额占比</view>
          </view>
          <view
            class="analysis-item"
            v-for="(item, index) in analysisList"
            :key="index"
            :style="{ color: item.color }"
          >
            <view class="analysis-cell1">{{ item.type }}</view>
            <view class="analysis-cell2">{{ item.num }}家</view>
            <view class="analysis-cell3"
              >{{ numberChangeString(item.turn) }}元</view
            >
            <view class="analysis-cell4">{{ item.rate }}%</view>
          </view>
        </view>
        <view class="divide-line"></view>
        <!-- <view class="common-sec-title" style="font-weight: 400"
          >餐饮类类别占比</view
        >
        <view class="food-type-list">
          <view
            class="food-item"
            v-for="(item, index) in foodTypeList"
            :key="index"
            :style="{ width: item.rate + '%' }"
          >
            <view class="food-line" :style="{ background: item.color }"></view>
            <view class="food-label" :style="{ color: item.color }">{{
              item.type
            }}</view>
            <view class="food-value">{{ item.rate }}%</view>
            <view class="food-value"
              >{{ numberChangeString(item.turn) }}元</view
            >
          </view>
        </view> -->
      </view>
      <view class="view-top-box">
        <view class="common-sec-title">数据归集对比图</view>
        <view class="home-center-box" style="margin-bottom: 40rpx">
          <view class="stastic-item noline">
            <view>自动采集</view>
            <view style="color: #3287ff"
              ><view class="num">{{ 0 }}&nbsp;</view>家</view
            >
          </view>
          <view class="stastic-item">
            <view>周均金额</view>
            <view style="color: #3287ff"
              ><view class="num">{{ 0 }}</view
              >万元</view
            > </view
          >x
          <view class="stastic-item noline">
            <view>人工填报</view>
            <view style="color: #ff9832"
              ><view class="num">{{ jyEchartNum.qiyeCount }}&nbsp;</view
              >家</view
            >
          </view>
          <view class="stastic-item">
            <view>周均金额</view>
            <view style="color: #ff9832"
              ><view class="num">{{ numWan(jyEchartNum.totalPrice / 7) }}</view
              >万元</view
            >
          </view>
        </view>
        <view class="chart-title">
          <view class="chart-dw">单位：元</view>
          <view class="chart-line-legend-box">
            <view class="line-item">
              <view style="background: #3287ff"></view>
              自动采集
            </view>
            <view class="line-item">
              <view style="background: #ff9200"></view>
              人工填报
            </view>
          </view>
        </view>
        <qiun-data-charts
          type="line"
          :opts="lineOneOpt"
          :chartData="twoLineData"
        />
        <view style="margin-top: 32rpx"
          >当前【舒城县】下共{{ jingQuLenth }}个风景区，共{{
            jyEchartNum.qiyeCount
          }}家店铺，通过<text style="color: #3287ff">自动采集</text>和<text
            style="color: #ff9200"
            >人工填报</text
          >2种方式实现经营数据归集。</view
        >
      </view>
    </view>
    <!-- 流量篇 -->
    <view class="common-box">
      <view class="common-title">
        <div class="left-line"></div>
        <div class="title-label">流量篇</div>
        <div class="right-line"></div>
      </view>
      <view class="home-stastic-box border-box">
        <view class="stastic-item">
          <view>
            <image :src="icon1" />
            总人数
          </view>
          <view class="big"
            ><view class="num">{{
              numWan(llDetailObj.total) || 0
            }}</view
            >&nbsp;&nbsp;万人</view
          >
          <!-- <view class="circle-rate-box">
            环比
            <view
              class="rate-num"
              :style="{ color: getColor(llDetailObj.totalQoq) }"
              >{{ llDetailObj.totalQoq || 0 }}%</view
            >
            <image :src="getImg(llDetailObj.totalQoq)" />
          </view> -->
        </view>
        <view class="stastic-item noAfter alignCenter">
          <view>
            <image :src="icon1" />
            女性人数
          </view>
          <view class="big"
            ><view class="num">{{
              numWan(llDetailObj.female) || 0
            }}</view
            >&nbsp;&nbsp;万人</view
          >
          <!-- <view class="circle-rate-box">
            环比
            <view
              class="rate-num"
              :style="{ color: getColor(llDetailObj.totalQoq) }"
              >{{ llDetailObj.totalQoq || 0 }}%</view
            >
            <image :src="getImg(llDetailObj.totalQoq)" />
          </view> -->
        </view>
        <view class="stastic-item alignCenter">
          <view>
            <image :src="icon1" />
            男性人数
          </view>
          <view class="big"
            ><view class="num">{{
              numWan(llDetailObj.male) || 0
            }}</view
            >&nbsp;&nbsp;万人</view
          >
          <!-- <view class="circle-rate-box">
            环比
            <view
              class="rate-num"
              :style="{ color: getColor(llDetailObj.totalQoq) }"
              >{{ llDetailObj.totalQoq || 0 }}%</view
            >
            <image :src="getImg(llDetailObj.totalQoq)" />
          </view> -->
        </view>
      </view>
      <!-- 折线图 3 -->
      <view class="border-box">
        <view class="common-sec-title">入园性别时间比</view>
        <view class="chart-title">
          <view class="chart-dw">单位：人次</view>
          <view class="chart-line-legend-box">
            <view class="line-item">
              <view style="background: #fc4956"></view>
              女性
            </view>
            <view class="line-item">
              <view style="background: #257ae7"></view>
              男性
            </view>
          </view>
          <view class="chart-dw">单位：人次</view>
        </view>
        <qiun-data-charts
          type="line"
          :opts="lineOpt"
          :chartData="threeLineData"
        />
        <view class="home-center-box" style="margin-top: 40rpx">
          <view class="stastic-item">
            <view>总人流量</view>
            <view style="color: #3287ff"
              ><view class="num">{{ sexObjNum.total || 0 }}&nbsp;</view>人次</view
            >
          </view>
          <view class="stastic-item noline">
            <view>女性人数</view>
            <view style="color: #3287ff"
              ><view class="num">{{ sexObjNum.female || 0 }}&nbsp;</view>人次</view
            >
          </view>
          <view class="stastic-item">
            <view>男性人数</view>
            <view style="color: #3287ff"
              ><view class="num">{{ sexObjNum.male || 0 }}</view
              >人次</view
            >
          </view>
        </view>
      </view>

      <view class="border-box">
        <view class="common-sec-title">入园年龄比</view>
        <qiun-data-charts type="ring" :opts="pieOpt" :chartData="pieData" />
        <view class="legend-box">
          <view class="legend-item" v-for="(item, index) in data" :key="index">
            <view
              class="circle"
              :style="{ background: pieOpt.color[index] }"
            ></view>
            <view class="label">{{ item.name }}</view>
            <view class="rate" :style="{ color: pieOpt.color[index] }"
              >{{ item.sum || 0 }}%</view
            >
          </view>
        </view>
      </view>

      <view class="border-box">
        <view class="common-sec-title">入园人数TOP5</view>
        <view
          class="view-rank"
          v-for="(item, index) in personList"
          :key="index"
          :style="{ color: item.color, background: item.bg }"
        >
          <view class="view-rank-title">
            {{ item.name }}
            <view class="right-tag"
              >日均入园人数：{{ numberChangeString(item.dayPerson) }}人</view
            >
          </view>
          <!-- <view class="view-rank-subtitle">
            景区内入口有&nbsp;&nbsp;<view class="num">{{ item.num }}</view
            >&nbsp;&nbsp;个
          </view> -->
          <view class="view-rank-subtitle">
            平均入园人数&nbsp;&nbsp;<view class="num">{{
              item.equaPerson
            }}</view
            >&nbsp;&nbsp;人，景区排名&nbsp;&nbsp;
            <view class="num">第{{ index + 1 }}</view>
          </view>
        </view>
      </view>

      <view class="border-box">
        <view class="common-sec-title">省内客源来源地排名</view>
        <view class="bubble-box">
          <view
            class="bubble-item"
            v-for="(item, index) in provinceList"
            :key="index"
            :style="{ borderColor: bubbleColor1[index] }"
          >
            <view
              class="bubble-content"
              :style="{ background: bubbleBg1[index] }"
            >
              <view>第{{ chineseNumber[index] }}</view>
              <view>{{ item }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="view-top-box">
        <view class="common-sec-title">省外客源来源地排名</view>
        <view class="bubble-box">
          <view
            class="bubble-item"
            v-for="(item, index) in outProvinceList"
            :key="index"
            :style="{ borderColor: bubbleColor2[index] }"
          >
            <view
              class="bubble-content"
              :style="{ background: bubbleBg2[index] }"
            >
              <view>第{{ chineseNumber[index] }}</view>
              <view>{{ item }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <u-picker
      :show="show"
      ref="uPicker"
      :defaultIndex="defaultIndex"
      :columns="columns"
      @cancel="show = false"
      @confirm="confirm"
      @change="changeHandler"
    ></u-picker>
  </view>
</template>

<script>
import { numberChangeString } from "@/utils/common.js";
import {
  getJyEchart,
  getJyViewRank,
  getJyDetail,
  getLlDetail,
  getLlLineSex,
  getLlPeopleTop,
  getLlInside,
  getLlOut,
  getLlAge,
  jingQuListApi,
} from "@/api/weekReport/index.js";
import { lineOpt, pieOpt } from "./option.js";
import icon1 from "@/static/images/homepage/icon1.png";
import icon2 from "@/static/images/homepage/icon2.png";
import icon3 from "@/static/images/homepage/icon3.png";
import icon4 from "@/static/images/homepage/icon4.png";
import icon5 from "@/static/images/homepage/icon5.png";
import icon6 from "@/static/images/homepage/icon6.png";
import icon7 from "@/static/images/homepage/icon7.png";
import down from "@/static/images/homepage/down.png";
import up from "@/static/images/homepage/up.png";
import reportBg from "@/static/images/homepage/reportBg.png";
export default {
  data() {
    return {
      oneLineData: {},
      twoLineData: {},
      threeLineData: {},
      pieData: {},
      reportBg,
      icon1,
      icon2,
      icon3,
      icon4,
      icon5,
      icon6,
      icon7,
      down,
      up,
      pieOpt: pieOpt(),
      lineOpt: lineOpt(2),
      lineOneOpt: lineOpt(),
      show: false,
      week: 0,
      year: 0,
      jingQuLenth: 0,
      jyDetailObj: {
        canyinCount: 0,
        canyinPrice: "0",
        canyinRate: 0,
        date: 0,
        orderPrice: 0,
        qitaCount: 0,
        qitaPrice: 0,
        qitaRate: 0,
        orderQoq: "0",
        totalQoq: "0",
        totalPrice: 0,
        youwanCount: 0,
        youwanPrice: 0,
        youwanRate: 0,
        zhusuCount: 0,
        zhusuRate: 0,
        zhusuPrice: 0,
      },
      sexObjNum: {
        female: 0,
        male: 0,
        total: 0,
      },
      llDetailObj: {
        female: 0,
        male: 0,
        total: 0,
      },
      jyEchartNum: {
        totalPrice: 0,
        qiyeCount: 0,
        peopleCount: 0,
      },
      data: [],
      foodTypeList: [
        {
          type: "中餐",
          turn: 9000,
          rate: 30,
          color: "#5AA3F8",
        },
        {
          type: "西餐",
          turn: 9000,
          rate: 50,
          color: "#3A71F6",
        },
        {
          type: "其他类",
          turn: 9000,
          rate: 20,
          color: "#20469B",
        },
      ],
      analysisList: [
        {
          type: "游览类",
          num: 0,
          turn: 0,
          rate: 0,
          color: "#007AFF",
        },
        {
          type: "餐饮类",
          num: 0,
          turn: 0,
          rate: 0,
          color: "#05C46D",
        },
        {
          type: "住宿类",
          num: 0,
          turn: 0,
          rate: 0,
          color: "#FFAF24",
        },
        {
          type: "其他类",
          num: 0,
          turn: 0,
          rate: 0,
          color: "#8C25E7",
        },
      ],
      viewList: [
        {
          name: "",
          equaTurn: 0,
          dayTurn: 0,
          num: 0,
          bg: "linear-gradient(to left, #D4A154 0%, #F7EFCE 100%)",
          color: "#774718",
        },
        {
          name: "",
          equaTurn: 0,
          dayTurn: 0,
          num: 0,
          bg: "linear-gradient(to left, #F1DCCC 7%, #FFF8F3 100%)",
          color: "#A8693A",
        },
        {
          name: "",
          equaTurn: 0,
          dayTurn: 0,
          num: 0,
          bg: "linear-gradient(to left, #D2E4FB 0%, #F6F5F5 100%)",
          color: "#2455AA",
        },
        {
          name: "",
          equaTurn: 0,
          dayTurn: 0,
          num: 0,
          bg: "linear-gradient(to left, #CBDFE6 6%, #F1F3F4 100%)",
          color: "#3D6982",
        },
        {
          name: "",
          equaTurn: 0,
          dayTurn: 0,
          num: 0,
          bg: "linear-gradient(to left, #E4D0F7 14%, #FCF5FF 100%)",
          color: "#6A339E",
        },
      ],
      chineseNumber: ["一", "二", "三", "四", "五"],
      provinceList: ["合肥市", "六安市", "芜湖市", "淮南市", "滁州市"],
      outProvinceList: ["江苏省", "安徽省", "湖北省", "湖南省", "山东省"],
      bubbleBg1: [
        "linear-gradient(180deg, #BC80F1 0%, #9868FC 66%)",
        "linear-gradient(180deg, #F9E65B 0%, #FDB306 100%)",
        "linear-gradient(180deg, #F49D7F 0%, #FD7641 100%)",
        "linear-gradient(180deg, #6BBAF2 0%, #739DEA 100%)",
        "linear-gradient(180deg, #4BDFBB 0%, #1BCD97 100%)",
      ],
      bubbleColor1: ["#9868FC", "#FDB306", "#FD7641", "#739DEA", "#1BCD97"],
      bubbleColor2: ["#2376F8", "#BF67F6", "#09BB8B", "#DF4444", "#EC9B1B"],
      bubbleBg2: [
        "linear-gradient(180deg, #49ADFF 0%, #2376F8 100%)",
        "linear-gradient(180deg, #D19AE9 0%, #BF67F6 100%)",
        "linear-gradient(180deg, #0CDBBB 0%, #09BB8B 100%)",
        "linear-gradient(180deg, #FF9090 0%, #DF4444 100%)",
        "linear-gradient(180deg, #F7C80F 0%, #EC9B1B 100%)",
      ],
      personList: [
        {
          name: "",
          equaPerson: 0,
          dayPerson: 0,
          num: 0,
          bg: "linear-gradient(to left, #D4A154 0%, #F7EFCE 100%)",
          color: "#774718",
        },
        {
          name: "",
          equaPerson: 0,
          dayPerson: 0,
          num: 0,
          bg: "linear-gradient(to left, #F1DCCC 7%, #FFF8F3 100%)",
          color: "#A8693A",
        },
        {
          name: "",
          equaPerson: 0,
          dayPerson: 0,
          num: 0,
          bg: "linear-gradient(to left, #D2E4FB 0%, #F6F5F5 100%)",
          color: "#2455AA",
        },
        {
          name: "",
          equaPerson: 0,
          dayPerson: 0,
          num: 0,
          bg: "linear-gradient(to left, #CBDFE6 6%, #F1F3F4 100%)",
          color: "#3D6982",
        },
        {
          name: "",
          equaPerson: 0,
          dayPerson: 0,
          num: 0,
          bg: "linear-gradient(to left, #E4D0F7 14%, #FCF5FF 100%)",
          color: "#6A339E",
        },
      ],
      columns: [],
      defaultIndex: [],
      columnData: [],
    };
  },
  onLoad(options) {
    let { year, week } = options;
    this.year = year;
    this.week = week;
    this.initData(year, week);
    this.dataChange();
  },
  methods: {
    getJingQuList() {
      jingQuListApi().then((res) => {
        if (res.code === 200) {
          this.jingQuLenth = res?.data?.length || 0;
        }
      });
    },
    numWan(num) {
      return Number(num) / 10000;
    },
    getColor(str = "") {
      return str?.includes("-") ? "#F23D4F" : "#58C175";
    },
    getImg(str = "") {
      return str?.includes("-") ? down : up;
    },
    initData(year, week) {
      let yearArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => {
        return year - 9 + item;
      });
      let cutYearWeek = [];
      let weekArr = yearArr.map((item) => {
        let arr = this.getWeeksInYear(item).map((i) => i.weekNum);
        if (item == year) {
          cutYearWeek = arr;
        }
        return arr;
      });
      this.columns = [yearArr, cutYearWeek];
      this.columnData = weekArr;
      this.defaultIndex = [9, cutYearWeek.findIndex((item) => week == item)];
    },
    dataChange() {
      this.getJyDetailFn();
      this.getJyViewRankFn();
      this.getJyEchartFn();
      this.getJingQuList();
      this.getLlDetailFn();
      this.getLlLineSexFn();
      this.getLlAgeFn();
      this.getLlPeopleTopFn();
      this.getLlInsideFn();
      this.getLlOutFn();
    },
    // 经营
    getJyDetailFn() {
      getJyDetail({
        year: this.year,
        week: this.week,
      }).then((res) => {
        this.jyDetailObj = res?.data || {};
        this.analysisList = this.analysisList.map((item, index) => {
          if (index === 0) {
            return {
              ...item,
              num: res?.data?.youwanCount,
              turn: res?.data?.youwanCount,
              rate: res?.data?.youwanCount,
            };
          } else if (index === 1) {
            return {
              ...item,
              num: res?.data?.canyinCount,
              turn: res?.data?.canyinPrice,
              rate: res?.data?.canyinRate,
            };
          } else if (index === 2) {
            return {
              ...item,
              num: res?.data?.zhusuCount,
              turn: res?.data?.zhusuPrice,
              rate: res?.data?.zhusuRate,
            };
          } else {
            return {
              ...item,
              num: res?.data?.qitaCount,
              turn: res?.data?.qitaPrice,
              rate: res?.data?.qitaRate,
            };
          }
        });
      });
    },
    getJyViewRankFn() {
      getJyViewRank({
        year: this.year,
        week: this.week,
      }).then((res) => {
        this.viewList = res?.data?.map((item, index) => {
          return {
            ...this.viewList[index],
            name: item.jingquName,
            num: item.qiyeCount,
            equaTurn: item.avgPrice,
            dayTurn: item.dayAvgPrice,
          };
        });
      });
    },
    getJyEchartFn() {
      getJyEchart({
        year: this.year,
        week: this.week,
      }).then((res) => {
        this.oneLineData = this.getLineDataFn(
          ["人流量", "营业额"],
          ["#50D166", "#1875F0"],
          1,
          (res?.data?.dateList || []).map((item) =>
            item.replace(this.year + "-", "")
          ),
          res?.data?.peopleCountList || [],
          res?.data?.priceList || []
        );
        this.twoLineData = this.getLineDataFn(
          ["自动采集", "人工填报"],
          ["#3287FF", "#FF9200"],
          0,
          (res?.data?.dateList || []).map((item) =>
            item.replace(this.year + "-", "")
          ),
          (res?.data?.priceList || []).map((item) => 0),
          res?.data?.priceList || []
        );
        this.jyEchartNum = {
          peopleCount: res?.data?.peopleCount || 0,
          totalPrice: res?.data?.totalPrice || 0,
          qiyeCount: res?.data?.qiyeCount || 0,
        };
      });
    },
    // 流量
    getLlDetailFn() {
      getLlDetail({
        year: this.year,
        week: this.week,
      }).then((res) => {
        this.llDetailObj = res?.data || {};
      });
    },
    getLlLineSexFn() {
      getLlLineSex({
        year: this.year,
        week: this.week,
      }).then((res) => {
        this.threeLineData = this.getLineDataFn(
          ["女性", "男性"],
          ["#FC4956", "#257AE7"],
          1,
          (res?.data?.dateList || []).map((item) =>
            item.replace(this.year + "-", "")
          ),
          res?.data?.femaleList || [],
          res?.data?.maleList || []
        );
		let male = (res?.data?.femaleList || []).reduce((a, b) => a + b, 0)
		let female = (res?.data?.maleList || []).reduce((a, b) => a + b, 0)
		this.sexObjNum = {
			male, female, total: male + female
		}
      });
    },
	getLlAgeFn () {
		getLlAge({
			year: this.year,
			week: this.week,
		}).then((res) => {
			this.data = res?.data?.type?.map((item, index) => {
				return {
					name: item,
					value: res?.data?.count?.[index] || 0
				}
			})
			this.getServerData()
		})
	},
	getLlPeopleTopFn () {
		getLlPeopleTop({
			year: this.year,
			week: this.week,
		}).then((res) => {
			this.personList = res?.data?.map((item, index) => {
				return {
					...this.personList[index],
					name: item.jingquName,
					equaPerson: item.userCount,
					dayPerson: item.dayAvgCount,
					num: 0,
				};
			});
		})
	},
	getLlInsideFn () {
		getLlInside({
			year: this.year,
			week: this.week,
		}).then((res) => {
			console.log(res);
			this.provinceList = (res?.data || []).filter((i, index) => index<5).map((item) => item.name)
		})
	},
	getLlOutFn () {
		getLlOut({
			year: this.year,
			week: this.week,
		}).then((res) => {
			console.log(res);
			this.outProvinceList = (res?.data || []).filter((i, index) => index<5).map((item) => item.name)
		})
	},
    numberChangeString,
    getWeeksInYear(year) {
      let weeks = [];
      let date = new Date(year, 0, 1); // 1月1日
      let dayOfWeek = date.getDay() ? date.getDay() : 7;
      let weekNum = 1;
      if (dayOfWeek !== 1) {
        weeks.push({
          weekNum: weekNum,
          startDate: new Date(date),
          endDate: new Date(
            date.getTime() + (7 - dayOfWeek) * 24 * 60 * 60 * 1000
          ),
        });
        weekNum++;
        date.setDate(date.getDate() + (8 - dayOfWeek)); // 增加日期直到下一个周一
      }
      // 循环今年的每一天
      while (date.getFullYear() === year) {
        // 如果今天为星期天，则添加进新的周
        if (date.getDay() === 1) {
          weeks.push({
            weekNum: weekNum,
            startDate: new Date(date),
            endDate: new Date(date.getTime() + 6 * 24 * 60 * 60 * 1000),
          });
          weekNum++;
        }
        // 移动到下一天
        date.setDate(date.getDate() + 1);
      }
      // console.log(weeks);
      return weeks;
    },
    getLineDataFn(name, color, index, categories, data1, data2) {
      let obj = {};
      index && (obj.index = index);
      return {
        categories,
        series: [
          {
            name: name?.[0],
            color: color?.[0],
            data: data1,
          },
          {
            name: name?.[1],
            ...obj,
            color: color?.[1],
            data: data2,
          },
        ],
      };
    },
    getServerData() {
        let sum = this.data.reduce((a, b) => a + b.value, 0);
        this.data = this.data.map((item) => ({
          ...item,
          sum: sum ? ((item.value / sum) * 100).toFixed(1) : 0,
        }));
        let res = {
          series: [
            {
              data: this.data,
            },
          ],
        };
        this.pieData = res;
    },
    goBack() {
      uni.navigateBack();
    },
    changeHandler(e) {
      // const {
      //     columnIndex,
      //     value,
      //     values, // values为当前变化列的数组内容
      //     index,
      //     picker = this.$refs.uPicker
      // } = e
      // // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      // if (columnIndex === 0) {
      //     // picker为选择器this实例，变化第二列对应的选项
      //     picker.setColumnValues(1, this.columnData[index])
      // }
    },
    confirm(e) {
      this.year = e?.value?.[0] || 0;
      this.week = e?.value?.[1] || 0;
      this.show = false;
	  this.dataChange()
    },
  },
};
</script>

<style lang="less">
.weekly-report {
  position: relative;
  padding: 212rpx 16rpx 42rpx;
  &::after {
    content: "";
    width: 100%;
    height: calc(100% - 634rpx);
    top: 634rpx;
    left: 0;
    background: #2b539d;
    position: absolute;
    z-index: -1;
  }
  .u-nav-slot {
    display: flex;
    align-items: center;
    .u-icon {
      font-size: 28rpx;
    }
    .date-display {
      margin-left: 30rpx;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 24rpx;
      padding: 4rpx;
      .date-display-box {
        display: flex;
        justify-items: center;
        height: 40rpx;
        font-size: 28rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 40rpx;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 20rpx;
        padding: 0 12rpx;
        .u-icon {
          margin-left: 14rpx;
        }
      }
    }
  }
  .bg {
    width: 100%;
    height: 634rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .weekly-report-title {
    height: 64rpx;
    font-size: 60rpx;
    font-weight: 400;
    color: #ffffff;
    line-height: 64rpx;
    text-align: center;
  }

  .date-label {
    height: 28rpx;
    font-size: 28rpx;
    font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 28rpx;
    text-align: center;
    margin: 46rpx 0;
  }

  .common-box {
    padding: 0 16rpx 16rpx;
    background: #e9effb;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
    .common-title {
      padding: 32rpx 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .title-label {
        margin: 32rpx;
        height: 58rpx;
        font-size: 48rpx;
        font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
        font-weight: 400;
        color: #1a54a3;
        line-height: 58rpx;
      }
      .left-line {
        flex: 1;
        height: 4rpx;
        background: linear-gradient(
          to right,
          rgba(0, 86, 169, 0) 0%,
          #0056a9 100%
        );
      }
      .right-line {
        flex: 1;
        height: 4rpx;
        background: linear-gradient(
          to left,
          rgba(0, 86, 169, 0) 0%,
          #0056a9 100%
        );
      }
    }
  }
  .home-stastic-bbox {
    border-radius: 16rpx;
    background: #fff;
    padding: 16rpx;
  }
  .divide-line {
    margin: 36rpx 0;
    border-bottom: 2rpx solid #f4f4f4;
  }
  .home-stastic-box {
    display: flex;
    justify-content: space-between;
    .stastic-item {
      flex: 1;
      position: relative;
      padding-left: 16rpx;
      &::after {
        content: "";
        width: 2rpx;
        height: 100%;
        position: absolute;
        background: #e8e8e8;
        top: 0;
        bottom: 0;
        margin: auto 0;
        right: 0;
      }
      &:nth-last-of-type(1) {
        &::after {
          width: 0;
        }
      }
      &.noAfter {
        &::after {
          width: 0;
        }
      }
      > view:nth-of-type(1) {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 24rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #666666;
        margin-bottom: 8rpx;
        image {
          height: 32rpx;
          width: 32rpx;
          margin-right: 8rpx;
        }
      }
      view:nth-of-type(2) {
        display: flex;
        align-items: flex-end;
        font-size: 20rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #007aff;
        padding-top: 8rpx;
        .num {
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #007aff;
          font-size: 28rpx;
        }
        &.big {
          font-size: 24rpx;
          .num {
            font-size: 40rpx;
          }
        }
      }
      .circle-rate-box {
        display: flex;
        align-items: center;
        padding-top: 18rpx;
        font-size: 24rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        line-height: 28rpx;
        .rate-num {
          margin: 0 16rpx;
        }
        image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
  .home-center-box {
    display: flex;
    justify-content: space-between;
    .stastic-item {
      flex: 1;
      position: relative;
      &::after {
        content: "";
        width: 2rpx;
        height: 100%;
        position: absolute;
        background: #e8e8e8;
        top: 0;
        bottom: 0;
        margin: auto 0;
        right: 0;
      }
      &:nth-last-of-type(1),
      &.noline {
        &::after {
          width: 0;
        }
      }
      view:nth-of-type(1) {
        font-size: 24rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #666666;
        line-height: 40rpx;
        height: 40rpx;
        text-align: center;
      }
      view:nth-of-type(2) {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        // line-height: 28rpx;
        padding-top: 8rpx;
        font-size: 24rpx;
        .num {
          font-size: 40rpx;
          // line-height: 46rpx;
          color: inherit;
        }
      }
    }
  }
  .view-top-box {
    border-radius: 8rpx;
    margin-top: 16rpx;
    padding: 16rpx;
    background: #fff;
    * {
      color: inherit;
    }
    .analysis-list {
      .analysis-item {
        display: flex;
        align-items: center;
        margin-top: 24rpx;
        view {
          flex: 1;
          height: 34rpx;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          line-height: 34rpx;
        }
        .analysis-title {
          margin: 0;
        }
      }
    }
    .food-type-list {
      display: flex;
      .food-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .food-line {
          height: 32rpx;
          width: 100%;
          margin-bottom: 16rpx;
        }
        .food-label {
          height: 34rpx;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #5aa3f8;
          line-height: 34rpx;
        }
        .food-value {
          margin-top: 8rpx;
          height: 34rpx;
          font-size: 24rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
        }
      }
    }
  }

  .view-rank {
    margin-bottom: 16rpx;
    padding: 16rpx 24rpx;
    border-radius: 8rpx;
    .view-rank-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 34rpx;
      font-size: 32rpx;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      line-height: 34rpx;
      .right-tag {
        height: 48rpx;
        background: #ffffff;
        border-radius: 24rpx;
        font-size: 28rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #774718;
        line-height: 48rpx;
        padding: 0 24rpx;
      }
    }
    .view-rank-subtitle {
      display: flex;
      align-items: flex-end;
      padding-top: 20rpx;
      font-size: 20rpx;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #774718;
      // line-height: 34rpx;
      .num {
        font-size: 32rpx;
        font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
        font-weight: 500;
        color: #774718;
        // line-height: 34rpx;olik
      }
    }
  }
  .common-chart-box {
    background: #fafafa;
    border-radius: 8rpx;
    margin: 16rpx 4rpx 0;
    padding: 20rpx 16rpx;
  }
  .chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .chart-dw {
      height: 28rpx;
      font-size: 24rpx;
      font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
      font-weight: 400;
      color: #9b9b9b;
      line-height: 28rpx;
    }
    .chart-line-legend-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .line-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 32rpx;
        height: 28rpx;
        font-size: 24rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #666666;
        line-height: 28rpx;
        view {
          width: 24rpx;
          height: 12rpx;
          border-radius: 6rpx;
          margin-right: 4rpx;
        }
      }
    }
  }
  .common-sec-title {
    height: 34rpx;
    font-size: 28rpx;
    font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
    font-weight: 500;
    color: #333333;
    line-height: 34rpx;
    margin-bottom: 24rpx;
  }
  .alignCenter {
    padding-left: 24rpx !important;
  }
  .border-box {
    padding: 16rpx;
    border-radius: 8rpx;
    background: #fff;
    margin-bottom: 16rpx;
  }
  .legend-box {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 42rpx;
    align-items: center;
    .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 32rpx;
      width: 50%;
      .circle {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
      }
      .label,
      .rate {
        flex: 2;
        font-size: 24rpx;
        font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
        font-weight: 400;
        color: #111111;
        line-height: 34rpx;
        margin: 0 14rpx;
      }
      .rate {
        flex: 1;
        text-align: right;
        margin-right: 32rpx;
      }
    }
  }
  .bubble-box {
    height: 400rpx;
    position: relative;
    .bubble-item {
      border-radius: 50%;
      position: absolute;
      padding: 14rpx;
      border: 2rpx solid;
      .bubble-content {
        border-radius: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        view {
          font-size: 24rpx;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 34rpx;
          height: 34rpx;
        }
      }
      &:nth-of-type(1) {
        width: 236rpx;
        height: 236rpx;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      &:nth-of-type(2) {
        width: 180rpx;
        height: 180rpx;
        left: 20rpx;
        top: 40rpx;
      }
      &:nth-of-type(3) {
        width: 160rpx;
        height: 160rpx;
        right: 30rpx;
        top: 20rpx;
      }
      &:nth-of-type(4) {
        width: 140rpx;
        height: 140rpx;
        right: 20rpx;
        bottom: 40rpx;
      }
      &:nth-of-type(5) {
        width: 120rpx;
        height: 120rpx;
        left: 110rpx;
        bottom: 20rpx;
      }
    }
  }
}
</style>
